<!--
 * @Author: windys
 * @Description: 
 * @Date: 2021-12-11 10:19:24
-->
<template>
    <div class="chart_container">
        <div ref="myChart" id="myChart" :style="{ width: '100%', height: '350px' }"></div>
    </div>
</template>


<script >
import { nextTick, watch, computed, defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { debounce } from '../../../utils'
export default defineComponent({
    setup() {
        const { proxy } = getCurrentInstance()
        onMounted(() => {
            setTimeout(() => {
                init()
            }, 300)
        })
        const myChart = ref()
        const options = reactive({
            xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                boundaryGap: false,
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: 10,
                right: 10,
                bottom: 20,
                top: 30,
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                padding: [5, 10]
            },
            yAxis: {
                axisTick: {
                    show: false
                }
            },
            legend: {
                data: ['expected', 'actual']
            },
            series: [{
                name: 'expected', itemStyle: {

                },
                smooth: true,
                type: 'line',
                data: [100, 120, 161, 134, 105, 160, 165],
                animationDuration: 2800,
                animationEasing: 'cubicInOut'
            },
            {
                name: 'actual',
                smooth: true,
                type: 'line',
                itemStyle: {

                },
                data: [120, 82, 91, 154, 162, 140, 145],
                animationDuration: 2800,
                animationEasing: 'quadraticOut'
            }]
        })
        const store = useStore()
        const mode = computed(() => store.state.layoutMode)
        const init = () => {
            document.getElementById('myChart').setAttribute('_echarts_instance_', '')
            const myChart = proxy.$echarts.init(document.getElementById("myChart"));
            myChart.setOption(options, true);

            window.onresize = function () {
                nextTick(() => {
                    myChart.resize()
                })
            }
            watch(() => mode.value, (val) => {
                console.log(val, 'xxxxxxxxxxxxxxxxxxxxxx')
                setTimeout(() => {
                    init()
                }, 100)
            })
            if (document.getElementsByClassName('ant-layout-sider')[0]) {
                document.getElementsByClassName('ant-layout-sider')[0].addEventListener('transitionend', () => {
                    debounce(myChart.resize(), 1000)
                })
            }


        }
        return {
            init,
            options,
            myChart
        }
    },
})
</script>

<style lang="scss" scoped>
.chart_container {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    height: 380px;
    margin: 25px 0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
 